<script>
export default {
  props: ["data"],
  components: {},
  methods: {
    logistics(key) {
      switch (key) {
        case 0:
          return "未发货";
        case 1:
          return "已发货";
        case 2:
          return "已签收";
        case 3:
          return "未签收";
        default:
          break;
      }
    },
    getColor(key) {
      switch (key) {
        case 0:
          return "red";
        case 1:
          return "blue";
        case 2:
          return "blue";
        case 3:
          return "red";
        default:
          break;
      }
    },
  },
};
</script>

<template>
  <div class="logistics">
    <h2>物流相关信息</h2>
    <div class="logistics-info-header">
      <div class="logistics-info-header-left">
        <div
          class="logistics-status blue"
          :style="{ color: getColor(data.logisticsStatus) }"
        >
          {{ logistics(data.logisticsStatus) }}
        </div>
        <div class="logistics-company">{{ data.logisticsCompany }}</div>
        <div class="logistics-no">{{ data.logisticsNo }}</div>
      </div>
    </div>
    <ul class="logistics-info-list">
      <li v-for="item in data.logisticsInfo" :key="item.time">
        <div class="logistics-info-list-time">{{ item.time }}</div>
        <div class="logistics-info-list-content">{{ item.content }}</div>
      </li>
    </ul>
  </div>
</template>

<style scoped></style>
